<template>
  <div>
    <el-autocomplete
      v-model="submitter"
      :disabled="disabled"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="consumerSelect"
    >
      <template slot-scope="{ item }">
        <div class="name">{{ item.name }}</div>
        <span class="phone" style="color:#888">{{ item.phone }}</span>
      </template>
      <span slot="suffix" @click="openDialog">
        <svg-icon class-name="column-icon" icon-class="sousuo-line" />
      </span>
    </el-autocomplete>

    <!--  -->
    <el-dialog
      title="人员列表"
      width="800px"
      append-to-body
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="opened"
    >
      <search-form
        ref="queryForm"
        :key="'query'+consumerTabl"
        size="mini"
        :label-width="50"
        :search-config="queryConfig"
        @search="handleSearch"
      />
      <div class="table-box">
        <div class="table-list-box no-clo-border">
          <el-table
            v-loading="loading"
            border
            row-key="id"
            :height="280"
            :data="consumerList"
            class="customer-table"
            highlight-current-row
            :header-cell-style="headerCell"
            @current-change="currentChange"
          >
            <el-table-column v-for="item in cols" :key="JSON.stringify(item)" :label="item.label" :prop="item.prop" />
          </el-table>
        </div>
        <p style="text-align:right">
          <el-link v-if="consumerList.length<total" type="primary" @click="addMore">加载更多</el-link>
          <el-link v-else type="info">没有更多了</el-link>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
export default {
  props: {
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    defaultVal: {
      type: String,
      default: ''
    },
    customerCode: { // TODO:处理参数
      type: String,
      default: ''
    },
    flag: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      consumerTabl: new Date().getTime(),
      submitter: '',
      filtersRaw: [],
      userType2: { 'id': 'userType', 'property': 'userType', 'operator': '=', 'value': 1 },
      consumerList: [],
      curRow: null,
      pageSize: 1,
      total: 0
    }
  },
  computed: {
    cols() {
      return [{
        label: '姓名',
        prop: 'name'
      }, {
        label: '编码',
        prop: 'code'
      }, {
        label: '电话',
        prop: 'tel'
      }, {
        label: '组织',
        prop: 'orgName'
      }]
    },
    queryConfig() {
      let conf = null
      if (this.flag === '0') {
        conf = [{
          label: '姓名',
          prop: 'userName',
          type: 'text',
          filter: true,
          value: '',
          placeholder: '请输入姓名'
        }, {
          label: '电话',
          prop: 'phone',
          type: 'text',
          filter: true,
          value: '',
          placeholder: '请输入电话'
        }]
      } else {
        conf = [{
          label: '姓名',
          prop: 'name',
          type: 'text',
          filter: true,
          value: '',
          placeholder: '请输入姓名'
        }, {
          label: '电话',
          prop: 'tel',
          type: 'text',
          filter: true,
          value: '',
          placeholder: '请输入电话'
        }]
      }
      return conf
    }
  },
  watch: {
    defaultVal(v) {
      if (v) {
        this.submitter = v
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    feach(data) {
      // this.$store.getters.user.data.userName
      const getPerson = '/api/v1/signingRealEstate/getPerson'
      const domainUser = '/api/v1/user/domainUser/page'
      return request({
        url: this.flag === '1' ? getPerson : domainUser,
        method: 'post',
        data: qs.stringify(data)
      })
    },
    getData() {
      const params = {
        page: 1,
        rows: 999,
        filtersRaw: this.flag === '1' ? [] : JSON.stringify([this.userType2])
      }
      this.feach(params).then(res => {
        const data = res.data
        this.consumerList = data.records
        this.consumerList.forEach(item => {
          item.name = item.name || item.userName
          item.tel = item.tel || item.phone
        })
      })
    },

    consumerSelect(v) {
      this.submitter = v.name
      this.$emit('choose', v)
    },

    querySearch(queryString, cb) {
      var consumerList = this.consumerList
      var results = queryString ? consumerList.filter(this.createFilter(queryString)) : consumerList
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleClose() {
      this.pageSize = 1
      this.visible = false
    },
    openDialog() {
      if (this.disabled) return
      this.visible = true
    },
    headerCell() {
      return {
        background: 'rgb(246, 246, 246)',
        whiteSpace: 'nowrap',
        overflow: 'hidden'
      }
    },
    currentChange(row) {
      this.curRow = row
    },
    opened() {
      this.loading = true
      this.consumerList = []
      this.total = 0
      this.pageSize = 1
      this.$refs.consumerTabl = new Date().getTime()
      this.flag !== '1' ? this.filtersRaw = [this.userType2] : this.filtersRaw
      this.feachCustomer()
    },
    feachCustomer() {
      const queryParams = { rows: 20, page: this.pageSize, filtersRaw: JSON.stringify(this.filtersRaw) }
      this.feach(queryParams).then(res => {
        this.total = res.data.total
        this.consumerList = this.consumerList.concat(res.data.records)
        this.consumerList.forEach(item => {
          item.name = item.name || item.userName
          item.tel = item.tel || item.phone
          item.code = item.code || item.account
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addMore() {
      this.pageSize++
      this.feachCustomer()
    },
    handleSearch(data) {
      this.loading = true
      this.pageSize = 1
      this.flag !== '1' ? this.filtersRaw = data.filtersRaw.concat([this.userType2]) : this.filtersRaw = data.filtersRaw

      const queryParams = {
        filtersRaw: JSON.stringify(this.filtersRaw),
        rows: 20,
        page: 1
      }
      this.feach(queryParams).then(res => {
        this.total = res.data.total
        this.consumerList = res.data.records
        this.consumerList.forEach(item => {
          item.name = item.name || item.userName
          item.tel = item.tel || item.phone
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleConfirm() {
      this.pageSize = 1
      this.$set(this, 'submitter', this.curRow.name)
      this.$emit('choose', this.curRow)
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-table{
    /deep/ .table-other{
      display:inline-block;
    }
    /deep/ .el-table__row--level-1 .el-table-column--selection{
      visibility: hidden;
    }
      /deep/ .el-table th > .cell {
    white-space: nowrap !important;
  }
  .edit-cell{
    width:100%;
  }
}
</style>
